<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .big_div {
            width: 100%;
            background: red;
        }

        .content {
            width: 1030px;
            background: pink;
            margin: 0 auto;
        }

        #list {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        #list li {
            list-style: none;
            width: 250px;
            height: 237px;
            background: green;
            margin-bottom: 10px;
        }

        #list li img {
            width: 100%;
        }

        #list li p {
            line-height: 30px;
            color: #fff;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="big_div">
        <div class="content">
            <ul id="list">
                <!-- <li>
                    <img src="https://img.zcool.cn/community/031nvs5rqwq3jdqow374oly3330.png" alt="">
                    <p>黑鸭探长卡通IP形象<p>
                </li> -->
            </ul>
        </div>
    </div>
</body>
<script>
    var data = [
        { url: "https://img.zcool.cn/community/031nvs5rqwq3jdqow374oly3330.png", name: "黑鸭探长卡通IP形象" },
        { url: "https://img.zcool.cn/community/031h9t8cnmprxhox9ybbglq3538.png", name: "乌云插画集-18" },
        { url: "https://img.zcool.cn/community/031jopc1b9evigmykwmdckw3234.png", name: "卷不下去 我就去送外卖" },
        { url: "https://img.zcool.cn/community/031tnt8enqmeyt8ai61ui0w3139.png", name: "小欧的白日梦" },
        { url: "https://img.zcool.cn/community/0319wfltdillutdmbtiuj7f3935.png", name: "iconfont品牌升级" },
        { url: "https://img.zcool.cn/community/031qbca0da3uja3wkujtv9i3035.png", name: "小米 12S Ultra | 色彩" },
        { url: "https://img.zcool.cn/community/031xlalfgu6st2olrtqhmwt3130.png", name: "淘菜菜商业大插" },
        { url: "https://img.zcool.cn/community/031onsa2sc2gsyegygxcxkd3533.png", name: "【探索】立体-质感-毛玻璃" },
        { url: "https://img.zcool.cn/community/031qgiumpt1vrtcyusr5nit3234.png", name: "小狐狸胖次 17 骚气回归" },
        { url: "https://img.zcool.cn/community/031oo876zisdyqhbm5f4f1o3834.png", name: "超级动物小队" },
        { url: "https://img.zcool.cn/community/031nvs5rqwq3jdqow374oly3330.png", name: "黑鸭探长卡通IP形象" },
        { url: "https://img.zcool.cn/community/031h9t8cnmprxhox9ybbglq3538.png", name: "乌云插画集-18" }
    ]
    var list = document.getElementById('list')

    // for (i = 0; i < data.length; i++) {
    //     list.innerHTML += `
    //     <li>
    //                 <img src="${data[i].url}" alt="">
    //                 <p>${data[i].name}<p>
    //             </li>
    // }`}

    list.innerHTML = data.reduce(function (total, item) {
        total += `<li>
                    <img src="${item.url}" alt="">
                    <p>${item.name}</p>
                </li>`
        return total
    }, ``)
2





</script>

</html>